/**
 *
 * Utilities
 *
 */

/**
 * Background
 */

:root {
  --u-bg-transition          : var(--default-transition);
  --u-bg-border              : var(--default-border);
  --u-bg-border-bottom-width : 2px;
  --u-bg-color               : var(--color-bg);
  --u-bg-color-lightest      : var(--color-bg-lightest);
  --u-bg-color-lighter       : var(--color-bg-lighter);
  --u-bg-color-light         : var(--color-bg-light);
  --u-bg-color-dark          : var(--color-bg-dark);
  --u-bg-color-darker        : var(--color-bg-darker);
  --u-bg-color-darkest       : var(--color-bg-darkest);
  --u-bg-color-primary       : var(--color-primary);
  --u-bg-color-secondary     : var(--color-secondary);
  --u-bg-color-neutral       : var(--u-bg-color);
  --u-bg-color-danger        : color(var(--color-danger) tint(80%));
  --u-bg-color-warning       : color(var(--color-warning) tint(80%));
  --u-bg-color-unsure        : color(var(--color-unsure) tint(90%));
  --u-bg-color-success       : color(var(--color-success) tint(80%));
  --u-bg-color-highlight     : color(var(--color-highlight) tint(80%));
}

/**
 * List
 */

:root {
  --u-list-rhythm: var(--rhythm);
}

/**
 * Size
 */

:root {
  --u-size-rhythm: var(--rhythm);
}

/**
 * Space
 */

:root {
  --u-space-rhythm: var(--rhythm);
}

/**
 * Display
 */

:root {
  --u-display-rhythm: 1.5rem;
}


/**
 * Text
 */

:root {
  --u-text-color-invert    : var(--color-lightest-grey);
  --u-text-color-primary   : var(--color-primary);
  --u-text-color-secondary : var(--color-secondary);
  --u-text-color-highlight : var(--color-highlight);
  --u-text-color-success   : var(--color-success);
  --u-text-color-unsure    : var(--color-unsure);
  --u-text-color-neutral   : var(--color-neutral);
  --u-text-color-warning   : var(--color-warning);
  --u-text-color-danger    : var(--color-danger);
  --u-text-muted-opacity   : .6;
  --u-text-rhythm          : var(--rhythm);
}


/**
 *
 * Components
 *
 */

/**
 * Base
 */

:root {

  /* Forms */
  --base-form-color-placeholder : color(var(--color-neutral) shade(10%));

  /* Global */
  --base-font-size              : var(--font-size-base);
  --base-font-family            : var(--font-family-base);
  --base-color-font             : var(--color-base-font);
  --base-line-height            : var(--default-line-height);
  --base-bg-color               : var(--color-bg);

  /* Headings */
  --base-heading-size           : var(--font-size-base);
  --base-heading-color          : var(--color-secondary);

  /* Links */
  --base-link-color             : var(--color-highlight);
  --base-link-color-hover       : color(var(--base-link-color) shade(10%));
  --base-link-color-active      : color(var(--base-link-color) shade(20%));

  /* Lists */
  --base-list-rhythm            : var(--rhythm);

  /* Media */
  --media-figure-color          : var(--color-grey);

  /* Misc */
  --base-misc-hr-border         : 1px solid;
  --base-misc-hr-border-color   : var(--default-border-color);

  /* Text */
  --base-text-code-font-family  : var(--font-family-monospace);
  --base-text-code-font-size    : calc(13/16 * 1rem);
  --base-text-code-font-color   : var(--color-darkish-grey);
  --base-text-code-font-weight  : 400;
  --base-text-rhythm            : var(--rhythm);
  --base-text-kbd-border        : 1px solid color(#416988 alpha(7%));
  --base-text-kbd-border-bottom : 3px solid color(#416988 alpha(20%));
  --base-text-kbd-color-bg      : var(--color-white);

}


/**
 * Button
 */

:root {
  --Button-border-color      : currentcolor;
  --Button-border-width      : 0;
  --Button-color             : transparent;
  --Button-disabled-opacity  : 0.6;
  --Button-font              : inherit;
  --Button-padding           : calc(var(--rhythm) * .125) calc(var(--rhythm) * .5);
  --Button-padding-snug      : calc(var(--rhythm) * .25);
  --Button-padding-small     : calc(var(--rhythm) * .125) calc(var(--rhythm) * .5);
  --Button-color-text-invert : var(--color-white);
  --Button-color-default     : color(var(--color-secondary) tint(85%));
  --Button-color-primary     : var(--color-primary);
  --Button-color-secondary   : var(--color-secondary);
  --Button-color-highlight   : var(--color-highlight);
  --Button-color-success     : var(--color-success);
  --Button-color-unsure      : var(--color-unsure);
  --Button-color-neutral     : color(var(--color-secondary) tint(50%));
  --Button-color-warning     : var(--color-warning);
  --Button-color-danger      : var(--color-danger);
  --Button-transition        : all .25s var(--transition-ease-out-circ);
}


/**
 * Button Group
 */

:root {
  --ButtonGroup-font-size           : 1rem;
  --ButtonGroup-button-border-width : 0;
}


/**
 * Dropdown
 */

:root {
  --Dropdown-rhythm              : var(--rhythm);
  --Dropdown-transition          : all .2s var(--transition-ease-out-back);
  --Dropdown-z-index             : var(--z-scale-1);
  --Dropdown-active-z-index      : var(--z-scale-10);
  --Dropdown-content-color-bg    : var(--color-white);
  --Dropdown-content-border      : var(--default-border);
  --Dropdown-content-z-index     : var(--z-scale-8);
  --Dropdown-title-size          : calc(14/16 * 1rem);
  --Dropdown-title-color         : color(var(--color-secondary) tint(40%));
  --Dropdown-title-color-bg      : transparent;
  --Dropdown-item-color          : var(--color-highlight);
  --Dropdown-item-hover-color    : var(--Dropdown-content-color-bg);
  --Dropdown-item-hover-color-bg : var(--Dropdown-item-color);
  --Dropdown-item-transition     : all .2s ease-out;
}


/**
 * Header
 */

:root {
  --Header-background : var(--color-primary);
  --Header-rhythm     : var(--rhythm);
  --Header-z-index    : var(--z-scale-9);
}


/**
 * Headings
 */

:root {
  --Heading-font-family : var(--font-family-base);
  --Heading-font-weight : 600;
  --Heading-size-h1     : 36px;
  --Heading-size-h2     : 28px;
  --Heading-size-h3     : 24px;
  --Heading-size-h4     : 20px;
  --Heading-size-h5     : 18px;
  --Heading-size-h6     : 16px;
}


/**
 * Icon
 */

:root {
  --Icon-rhythm          : var(--rhythm);
  --Icon-transition-ease : var(--transition-ease-out-back);
  --Icon-transition      : .25s all var(--Icon-transition-ease);
}

/**
 * Links
 */

:root {
  --Link-color           : var(--base-link-color);
  --Link-color-hover     : color(var(--Link-color) shade(10%));
  --Link-color-active    : color(var(--Link-color) shade(20%));
  --Link-color-invert    : var(--color-white);
  --Link-color-neutral   : var(--color-neutral);
  --Link-color-danger    : var(--color-danger);
  --Link-color-warning   : var(--color-warning);
  --Link-color-unsure    : var(--color-unsure);
  --Link-color-success   : var(--color-success);
  --Link-color-highlight : var(--color-highlight);
}

/**
 * Difference
 */

:root {
  --difference-color-addition: color(var(--color-success) tint(67%));
  --difference-color-deletion: color(var(--color-danger) tint(84%));
}

/**
 * LogoLoader
 */

:root {
  --LogoLoader-color-logo        : var(--color-white);
  --LogoLoader-color-logo-invert : var(--color-primary);
  --LogoLoader-rhythm            : var(--rhythm);
  --LogoLoader-transition-ease   : var(--transition-ease-out-back);
}

/**
 * Modal
 */

:root {
  --Modal-rhythm                     : 1.5rem;
  --Modal-color-bg                   : color(var(--color-bg) alpha(.95));
  --Modal-transition                 : all .15s linear;
  --Modal-border                     : 1px solid color(var(--color-secondary) alpha(12%));
  --Modal-dialog-transition          : all .25s cubic-bezier(.175, .885, .320, 1.1);
  --Modal-dialog-border-bottom-width : 2px;
  --Modal-dialog-color-bg            : color(var(--color-bg) tint(60%));
  --Modal-header-color-bg            : var(--color-white);
  --Modal-title-font-size            : calc(22/16 * 1rem);
  --Modal-close-transition           : all .25s ease-out;
  --Modal-close-color-bg-hover       : color(var(--color-secondary) alpha(5%));
  --Modal-close-color-bg-active      : color(var(--color-secondary) alpha(10%));
  --Modal-z-index                    : var(--z-scale-10);
  --Modal-header-z-index             : var(--z-scale-1);
}

/**
 * Progressbar
 */

:root {
  --Progressbar-rhythm           : var(--rhythm);
  --Progressbar-highlight        : var(--color-highlight);
  --Progressbar-success          : var(--color-success);
  --Progressbar-unsure           : var(--color-unsure);
  --Progressbar-neutral          : var(--color-neutral);
  --Progressbar-warning          : var(--color-warning);
  --Progressbar-danger           : var(--color-danger);
  --Progressbar-item-z-index     : var(--z-scale-1);
  --Progressbar-approved-z-index : var(--z-scale-2);
}


/**
 * Toggle
 */

:root {
  --Toggle-rhythm              : var(--rhythm);
  --Toggle-color               : currentColor;
  --Toggle-color-active        : var(--color-white);
  --Toggle-color-active-invert : var(--color-black);
  --Toggle-color-bg-active     : var(--Toggle-color);
  --Toggle-transition          : all .25s var(--transition-ease-out-circ);
}

/**
 * TransUnit
 */

:root {
  --TransUnit-border-color           : var(--default-border-color);
  --TransUnit-color-danger           : var(--color-danger);
  --TransUnit-color-highlight        : var(--color-highlight);
  --TransUnit-color-neutral          : var(--color-neutral);
  --TransUnit-color-success          : var(--color-success);
  --TransUnit-color-unsure           : var(--color-unsure);
  --TransUnit-color-warning          : var(--color-warning);
  --TransUnit-header-footer-color-bg : var(--color-white);
  --TransUnit-heading-font-size      : 1rem;
  --TransUnit-header-z-index         : var(--z-scale-2);
  --TransUnit-metaDataButton-size    : calc(12/16 * 1rem);
  --TransUnit-rhythm                 : var(--rhythm);
  --TransUnit-text-font-family       : var(--font-family-base);
  --TransUnit-text-font-size         : var(--font-size-base);
  --TransUnit-text-line-height       : var(--default-line-height);
  --TransUnit-text-color             : var(--color-base-font);
  --TransUnit-transition-ease        : var(--transition-ease-out-circ);
  --TransUnit-transition             : all .25s var(--TransUnit-transition-ease);
  --TransUnit-focus-color-bg         : var(--color-white);
  --TransUnit-hover-color-bg         : var(--color-bg-lighter);
  --TransUnit-status-z-index         : var(--z-scale-2);
  --TransUnit-status-before-z-index  : var(--z-scale-3);
}

/**
 *
 * Views
 *
 */

/**
 * Editor
 */

:root {
  --Editor-rhythm               : var(--rhythm);
  --Editor-transition-ease      : var(--transition-ease-out-back);
  --Editor-color-status-bg      : color(var(--color-secondary) tint(82%));
  --Editor-color-translation-bg : var(--color-bg);
  --Editor-loader-z-index       : var(--z-scale-9);
}
